import React from 'react';
import { Card, Row, Col, Tooltip } from 'antd';
// import { history } from 'umi';
import ReactEcharts from '@/components/Echarts';
import LinkTo from '@/components/LinkTo';

import { fixNumber } from '../util';
import ScaleBar from './common/ScaleBar';
import styles from '../index.less';

const formatTip = (type, num, percentage, unit = '个') => `${type}：${num}${unit}，${percentage}`;

const renderGauge = ({ title, company = {} }) => {
    const value = company.perCapitaWorkloadNum;
    const standard = company.standardWorkloadNum;

    const tip = () => (
        <>
            <div>{formatTip('工作量不足', company.workloadLackPeopleNum, company.workloadLackRateStr)}</div>
            <div>{formatTip('工作量正常', company.workloadNormalPeopleNum, company.workloadNormalRateStr)}</div>
            <div>{formatTip('工作量超额', company.workloadExcessPeopleNum, company.workloadExcessRateStr)}</div>
        </>
    );
    return (
        <Tooltip title={tip} align={{ offset: [0, 50] }}>
            <div style={{ width: '100%', height: '100%' }}>
                <ReactEcharts
                    style={{
                        width: '100%',
                        height: '100%'
                    }}
                    option={{
                        series: [
                            {
                                name: title,
                                type: 'gauge',
                                detail: {
                                    formatter: `人均 ${company.perCapitaWorkloadNum} 个小时`,
                                    color: '#333',
                                    fontSize: 14
                                },
                                // detail: { show: false },
                                min: 0,
                                max: standard * 1.4,
                                data: [
                                    {
                                        value
                                    }
                                ],
                                axisLine: {
                                    lineStyle: {
                                        color: [
                                            [(value / standard) * 0.8, '#FFE7BA'],
                                            [(value / standard) * 1.2, '#FFC069'],
                                            [1, '#FA8C16']
                                        ],
                                        width: 14
                                    }
                                },
                                pointer: {
                                    length: '50%',
                                    width: 10
                                },
                                axisLabel: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                splitLine: {
                                    show: false
                                },
                                itemStyle: {
                                    color: '#FFA808'
                                }
                            }
                        ]
                    }}
                />
            </div>
        </Tooltip>
    );
};

const renderStyle = index => {
    let styleObj = { padding: '0 24px', height: '100%' };
    if (index === 0) {
        styleObj = {
            ...styleObj,
            borderLeft: '1px solid rgba(0,0,0,0.06)',
            borderRight: '1px solid rgba(0,0,0,0.06)'
        };
    }
    return styleObj;
};
const StaffCard = ({ data }) => {
    const { companyTaskTotalVO = {}, companyWorkloadStatisticsVOList = [] } = data;
    const companies = companyWorkloadStatisticsVOList.slice(0, 2);
    return (
        <Card
            title="员工工作透视图"
            extra={
                <LinkTo className={styles.moreBtn} to="/stat/workStat/workOverview/work/overview">
                    更多
                </LinkTo>
            }
        >
            <Row style={{ height: 280 }}>
                <Col span={12} style={{ paddingRight: 24 }}>
                    <Row type="flex" justify="space-between">
                        <Col>
                            <div className={styles.infoBox}>
                                <p>考核人数</p>
                                <p>
                                    <em>
                                        <LinkTo to="/stat/workStat/workOverview/work/employee">
                                            {companyTaskTotalVO.evalPeopleNum}
                                        </LinkTo>
                                    </em>
                                    人
                                </p>
                            </div>
                        </Col>
                        <Col>
                            <div className={styles.infoBox}>
                                <p>总任务数</p>
                                <p>
                                    <em>
                                        <LinkTo to="/stat/workStat/workOverview/work/task">
                                            {companyTaskTotalVO.totalTaskNum}
                                        </LinkTo>
                                    </em>
                                    个
                                </p>
                            </div>
                        </Col>
                        <Col>
                            <div className={styles.infoBox}>
                                <p>总工作量</p>
                                <p>
                                    <em>{fixNumber(companyTaskTotalVO.totalWorkloadNum, 0)}</em>小时
                                </p>
                            </div>
                        </Col>
                        <Col>
                            <div className={styles.infoBox}>
                                <p>标准工作量</p>
                                <p>
                                    <em>{companyTaskTotalVO.standardWorkloadNum}</em>小时
                                </p>
                            </div>
                        </Col>
                        <Col>
                            <div className={styles.infoBox}>
                                <p>人均工作量</p>
                                <p>
                                    <em>{fixNumber(companyTaskTotalVO.perCapitaWorkloadNum, 0)}</em>小时
                                </p>
                            </div>
                        </Col>
                    </Row>
                    <Row>
                        <div className={styles.subTitle} style={{ marginTop: 24 }}>
                            工作执行量分布
                        </div>
                        <ScaleBar
                            scaleData={[
                                {
                                    text: `已完成: ${companyTaskTotalVO.workloadDoneRateStr}`,
                                    style: {
                                        backgroundColor: '#FFA22D',
                                        width: companyTaskTotalVO.workloadDoneRateStr
                                    },
                                    tip: formatTip(
                                        '已完成',
                                        companyTaskTotalVO.workloadDoneNum,
                                        companyTaskTotalVO.workloadDoneRateStr,
                                        '小时'
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskStatus=完成'
                                },
                                {
                                    text: `进行中: ${companyTaskTotalVO.workloadExecutingRateStr}`,
                                    style: {
                                        backgroundColor: '#FFC53D',
                                        width: companyTaskTotalVO.workloadExecutingRateStr
                                    },
                                    tip: formatTip(
                                        '进行中',
                                        companyTaskTotalVO.workloadExecutingNum,
                                        companyTaskTotalVO.workloadExecutingRateStr,
                                        '小时'
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskStatus=处理中'
                                },
                                {
                                    text: `待执行: ${companyTaskTotalVO.workloadNonexecutionRateStr}`,
                                    style: {
                                        backgroundColor: '#FFD666',
                                        width: companyTaskTotalVO.workloadNonexecutionRateStr
                                    },

                                    tip: formatTip(
                                        '待执行',
                                        companyTaskTotalVO.workloadNonexecutionNum,
                                        companyTaskTotalVO.workloadNonexecutionRateStr,
                                        '小时'
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskStatus=待办'
                                }
                            ]}
                        />
                    </Row>
                    <Row style={{ marginTop: 24 }}>
                        <div className={styles.subTitle}>任务达成分布</div>
                        <ScaleBar
                            scaleData={[
                                {
                                    text: `正常达成: ${companyTaskTotalVO.normalDoneRateStr}`,
                                    style: { backgroundColor: '#40A9FF', width: companyTaskTotalVO.normalDoneRateStr },
                                    tip: formatTip(
                                        '正常达成',
                                        companyTaskTotalVO.normalDoneTaskNum,
                                        companyTaskTotalVO.normalDoneRateStr
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskCompleteStatus=正常'
                                },
                                {
                                    text: `逾期达成: ${companyTaskTotalVO.overdueDoneRateStr}`,
                                    style: {
                                        backgroundColor: '#69C0FF',
                                        width: companyTaskTotalVO.overdueDoneRateStr
                                    },
                                    tip: formatTip(
                                        '逾期达成',
                                        companyTaskTotalVO.overdueDoneTaskNum,
                                        companyTaskTotalVO.overdueDoneRateStr
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskCompleteStatus=逾期'
                                },
                                {
                                    text: `逾期未达成: ${companyTaskTotalVO.overdueNonexecutionRateStr}`,
                                    style: {
                                        backgroundColor: '#91D5FF',
                                        width: companyTaskTotalVO.overdueNonexecutionRateStr
                                    },
                                    tip: formatTip(
                                        '逾期未达成',
                                        companyTaskTotalVO.overdueNonexecutionTaskNum,
                                        companyTaskTotalVO.overdueNonexecutionRateStr
                                    ),
                                    link: '/stat/workStat/workOverview/work/task?taskCompleteStatus=逾期'
                                }
                            ]}
                        />
                    </Row>
                </Col>
                {companies.map((company, index) => (
                    <Col span={6} style={renderStyle(index)} key={company.companyName}>
                        <div className={styles.subTitle}>{company.companyName}</div>
                        {renderGauge({ title: '工作量', company })}
                    </Col>
                ))}
            </Row>
        </Card>
    );
};
export default StaffCard;
